<template>
  <div class="app-container">
    <div style="display: flex; justify-content: space-between">
      <div
        style="
          width: 45%;
          display: flex;
          margin-left: 50px;
          padding-left: 20px;
        "
      >
        <div style="float: left; margin-left: 20px;margin: 10px;">
          <el-card style="border-radius: 16px;  margin-top: 10px; ">
            <div slot="header" class="clearfix">
              <span style="font-size: 20px; font-weight: bold"
                >个人信息设置</span
              >
            </div>
            <div>
              <el-form
                ref="infoForm"
                :model="infoForm"
                :lable-posision="left"
                label-width="120px"
                style="margin: 0"
              >
                <el-form-item label="用户名">
                  <el-input v-model="infoForm.username" style="width: 300px" />
                </el-form-item>
                <el-form-item label="电话号码">
                  <el-input v-model="infoForm.phone" style="width: 300px" />
                </el-form-item>
                <el-form-item label="新电子邮箱">
                  <el-input
                    v-model="infoForm.email"
                    style="width: 300px"
                    prefix-icon="el-icon-folder"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="success"
                    @click="handleInfo"
                    icon="el-icon-check"
                    >保存修改</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-card>
          
        </div>
        <div style="float: left;margin: 10px;">
          <el-card style="border-radius: 16px;  margin-top: 10px">
            <div slot="header" class="clearfix">
              <span style="font-size: 20px; font-weight: bold">重置密码</span>
            </div>
            <div>
              <el-form
                ref="form"
                :model="form"
                :rules = 'rules'
                :lable-posision="left"
                label-width="120px"
                style="margin: 0"
              >
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input
                    v-model="form.oldPassword"
                    style="width: 300px"
                    show-password
                    prefix-icon="el-icon-lock"
                  />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword1">
                  <el-input
                    v-model="form.newPassword"
                    style="width: 300px"
                    show-password
                    prefix-icon="el-icon-lock"
                  />
                </el-form-item>
                <el-form-item label="重复新密码" prop="newPassword2">
                  <el-input
                    v-model="form.newPassword2"
                    style="width: 300px"
                    show-password
                    prefix-icon="el-icon-lock"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="danger"
                    @click="handleUpdate"
                    icon="el-icon-refresh-right"
                    >重置密码</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
      </div>

      <div style="width: 42%; display: flex"></div>
    </div>
  </div>
</template>

<script>
import { updatePassword, updateUserInfo } from "@/api/user";
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不能少于6个字符'))
      } else {
        callback()
      }
    }
    const checkRePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次确认密码'))
      } else if(value !== this.form.newPassword) {
        callback(new Error('请确保两次输入的密码一样'))
      }
      else {
        callback()
      }
    }
    return {
      form: {
        code: "",
        oldPassword: "",
        newPassword: "",
        newPassword2: "",
      },
      infoForm: {
        email: "",
        username: "",
        phone: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, validator: validatePassword, trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, validator: validatePassword, trigger: 'blur' }
        ],
        newPassword2: [
        { validator: checkRePassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning",
      });
    },
    handleInfo() {
      if(this.infoForm.username===''&&this.infoForm.phone===''&&this.infoForm.email==='')return
      updateUserInfo(this.infoForm).then((res) => {
        if (res.code === 200) {
          // <el-alert title="修改成功" type="success"></el-alert>;
          this.$message.success(res.msg)
        }
      });
    },
    handleUpdate() {
      this.$refs['form'].validate((valid)=>{
        if(valid){
          if(this.form.oldPassword==='')return
                updatePassword(this.form).then(res=>{
                  if(res.code===200){
                    this.$message.success(res.msg)
                  }
                })
        }else{
          return false
        }
      })
      
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}

.app-container {
  height: 93vh;
}
</style>

